GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>CodeMyPic</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">CodeMyPic</span></h1>

</header>

</div>

<th colspan="2" class="hintergrundfarbe6" style="font-size:105%; text-align:center;">CodeMyPic

</p>

</th></tr>

<tr>

</td></tr>

<tr>

<th colspan="2" class="hintergrundfarbe5" style="font-size:105%; text-align:center;">Basisdaten

</p>

</th></tr>

<tr>

<td><b><a href="Maintainer" title="Maintainer">Hauptentwickler</a></b>

</td>

<td>Kevin Reuß

</td></tr>

<tr>

<td><b><a href="Softwareentwickler" title="Softwareentwickler">Entwickler</a></b>

</td>

<td>Kevin Reuß

</td></tr>

<tr>

<td><b>Erscheinungsjahr</b>

</td>

<td>2019

</td></tr>

<tr>

<td><b><a href="Betriebssystem" title="Betriebssystem">Betriebssystem</a></b>

</td>

<td>Plattformunabhängig

</td></tr>

<tr>

<td><b><a href="Programmiersprache" title="Programmiersprache">Programmiersprache</a></b>

</td>

<td><a href="JavaScript" title="JavaScript">JavaScript</a>

</td></tr>

<tr>

<td><b>Kategorie</b>

</td>

<td><a href="Bildeditor" class="mw-redirect" title="Bildeditor">Bildeditor</a>

</td></tr>

<tr>

<td><b>Lizenz</b>

</td>

<td><a href="Creative_Commons" title="Creative Commons">Creative Commons</a>

</td></tr>

<tr>

<td><b><a href="Lokalisierung_(Softwareentwicklung)" title="Lokalisierung (Softwareentwicklung)">deutschsprachig</a></b>

</td>

<td>ja

</td></tr>

<tr>

<td class="hintergrundfarbe5" colspan="2" style="text-align:center;"><a rel="nofollow" class="external free" href="https://codemypic.de">https://codemypic.de</a>

</td></tr></tbody></table>

<p><b>CodeMyPic</b> ist ein <a href="Freie_Software" title="Freie Software">freier</a>, <a href="Didaktik" title="Didaktik">didaktisierter</a>, <a href="Quelltext" title="Quelltext">quelltextbasierter</a> <a href="Grafiksoftware" title="Grafiksoftware">Grafikeditor</a>, dessen Zielsetzung es ist, Schülerinnen und Schülern einen Einblick in den Aufbau sowie die Funktionsweise von einfachen, <a href="ASCII" class="mw-redirect" title="ASCII">ASCII</a>-basierten <a href="Grafikformat" title="Grafikformat">Bildkodierungen</a> zu ermöglichen. Er ist in <a href="JavaScript" title="JavaScript">JavaScript</a> programmiert und bietet unter anderem eine Seite-an-Seite-Darstellung, die den Quelltext sowie die Grafikdarstellung einer Bilddatei nebeneinander zeigt. Er unterliegt der <a href="Creative_Commons" title="Creative Commons">Creative Commons BY-NC-SA</a>-Lizenz.<sup id="cite_ref-informatik.schule_1-0" class="reference"><a href="#cite_note-informatik.schule-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Funktionsweise">Funktionsweise</h2></div>

<p>Das Hauptfenster des Editors besteht aus einem Quelltextfeld, einem Grafikfeld sowie einer Menüleiste, die typische Bedienmöglichkeiten bietet. Die Hauptfunktionalität besteht darin, dass die über das Quelltextfeld eingegebenen Quelltexte unterstützter Grafikformate simultan interpretiert und als Bild innerhalb des Grafikfeldes ausgegeben werden. Die Zielsetzung ist hier ganz klar das Vermitteln der Arbeitsweise einfacher Bildkodierungen und nicht die professionelle Bearbeitung von Grafikdateien.<sup id="cite_ref-informatik.schule_1-1" class="reference"><a href="#cite_note-informatik.schule-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup>

</p><p>Produktives Arbeiten ist im Hinblick auf das Erstellen und Bearbeiten von <a href="Scalable_Vector_Graphics" title="Scalable Vector Graphics">SVG</a>-Grafiken aber dennoch durchaus möglich. Hierzu bietet der Editor die in Quelltexteditoren für <a href="Auszeichnungssprache" title="Auszeichnungssprache">Auszeichnungssprachen</a> üblichen Funktionalitäten der <a href="Autovervollst%C3%A4ndigung" title="Autovervollständigung">Autovervollständigung</a> sowie des automatischen Einrückens der Auszeichner.

</p>

<div class="mw-heading mw-heading2"><h2 id="Didaktisches_Konzept">Didaktisches Konzept</h2></div>

<p>Durch seine Funktionsweise vernetzt der Editor die <a href="Symbol" title="Symbol">symbolische</a> Darstellungsebene von Bildkodierungen (<a href="Quelltext" title="Quelltext">Quelltext</a>) mit deren <a href="Ikon" title="Ikon">ikonischer</a> Darstellung (<a href="Grafik" title="Grafik">Grafik</a>). Da Änderungen am Quelltext sich unmittelbar auf die dargestellte Grafik auswirken, ist das Arbeiten mittels CodeMyPic zudem <a href="Enaktivismus" title="Enaktivismus">enaktiv</a>, da die Konsequenzen des Handels unmittelbar ersichtlich werden. Der Editor bildet somit das ursprünglich aus der Mathematikdidaktik stammende, aber inzwischen in den meisten <a href="Fachdidaktik" title="Fachdidaktik">Fachdidaktiken</a> etablierte, <a href="E-I-S-Prinzip" class="mw-redirect" title="E-I-S-Prinzip">E-I-S-Prinzip</a> vollständig ab.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>

</p>

<div class="mw-heading mw-heading2"><h2 id="Unterstützte_Grafikformate"><span id="Unterst.C3.BCtzte_Grafikformate"></span>Unterstützte Grafikformate</h2></div>

<ul><li><a href="Portable_Bitmap" class="mw-redirect" title="Portable Bitmap">Portable Bitmap</a> (PBM)</li>

<li><a href="Portable_Graymap" class="mw-redirect" title="Portable Graymap">Portable Graymap</a> (PGM)</li>

<li><a href="Portable_Pixmap" class="mw-redirect" title="Portable Pixmap">Portable Pixmap</a> (PPM)</li>

<li><a href="Scalable_Vector_Graphics" title="Scalable Vector Graphics">Scalable Vector Graphics</a> (SVG)</li></ul>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://codemypic.de/">Offizielle Website</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>

<li id="cite_note-informatik.schule-1"><span class="mw-cite-backlink">↑ <sup><a href="#cite_ref-informatik.schule_1-0">a</a></sup> <sup><a href="#cite_ref-informatik.schule_1-1">b</a></sup></span> <span class="reference-text"><a rel="nofollow" class="external free" href="https://informatik.schule.de/comments.php?material_id=473">https://informatik.schule.de/comments.php?material_id=473</a></span>

</li>

<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external free" href="https://www.josefleisen.de/downloads/sprachbildung/78%20Wechsel%20der%20Darstellungsformen%20Bili%202005,%209-11.pdf">https://www.josefleisen.de/downloads/sprachbildung/78%20Wechsel%20der%20Darstellungsformen%20Bili%202005,%209-11.pdf</a></span>

</li>

<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external free" href="https://service.zfl.uni-kl.de/wp/glossar/eis-prinzip">https://service.zfl.uni-kl.de/wp/glossar/eis-prinzip</a></span>

</li>

<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external free" href="https://www.friedrich-verlag.de/mathematik/konzepte-methoden/das-eis-prinzip-sinnvoll-im-matheunterricht-umsetzen/">https://www.friedrich-verlag.de/mathematik/konzepte-methoden/das-eis-prinzip-sinnvoll-im-matheunterricht-umsetzen/</a></span>

</li>

</ol></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-09-29" href="https://de.wikipedia.org/wiki/?title=CodeMyPic&oldid=260168975">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>